
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>后台管理</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/base.css">
  <style>
    .admin-page{
      display: flex;
      flex-direction: column;
    }
    .admin-page .header-box{
      height: 80px;
      background-color: #fff;
      width: 100%;
      display: flex;
      align-items: center;
      padding-left: 40px;
      padding-right: 34px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .header-box .user-box{
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .header-box .user-box img{
      height: 22px;
      width: 22px;
    }
    .header-box .black{
      font-weight: 500;
      font-size: 14px;
      color: #222222;
      padding-right: 20px;
      position: relative;
    }
    .header-box .black::after{
      position: absolute;
      content: '';
      width: 1px;
      height: 15px;
      background: #A9ABB3;
      right: -1px;
      top: 50%;
      transform: translateY(-50%);
    }
    .header-box .gray{
      font-weight: 500;
      font-size: 14px;
      color: #A9ABB3;
      margin-left: 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .header-box .gray span{
      display: block;
      height: 22px;
      line-height: 21px;
      margin-left: 10px;
    }
    .admin-page .cont-box{
      display: flex;
      height: calc(100vh - 80px);
      overflow: hidden;
    }
    .admin-page .sidebar {
      width: 220px;
      overflow-x: hidden;
      height: calc(100vh - 80px);
      background-color: #fff;
      padding:  24px 10px;
      position: relative; /* 添加相对定位，为activity-center-title的绝对定位提供参考 */
    }
    .admin-page .main-content {
      flex: 1;
      background-color: #fff;
    }
    .admin-page .nav-link {
      display: flex;
      padding: 10px;
      height: 52px;
      text-decoration: none;
      border-radius: 4px;
      margin-bottom: 20px;
      padding-left: 30px;
      align-items: center;
      font-weight: 400;
      font-size: 16px;
      color: var(--gray-color);
    }
    .admin-page .nav-link img{
      margin-right: 15px;
    }
    .nav-link.active,.nav-link:hover {
      width: 198px;
      height: 52px;
      background: var(--blue-color);
      border-radius: 10px;
    }
    .nav-link.active,.nav-link:hover {
      color: var(--white-color);
    }
    .nav-link.active  .white-img,.nav-link:hover .white-img{
      display: block !important;
    }
    .nav-link.active .gray-img,.nav-link:hover .gray-img{
      display: none;
    }
    .nav-link .white-img{
      display: none !important;
    }
    .nav-link  .gray-img{
      display: block ;
    }
    .sub-category .nav-link{
      width: 194px;
      background-color: #fff;
      padding-left: 43px;
      color: var(--placeholder-color);
    }
    .sub-category .nav-link.active,.sub-category .nav-link:hover {
      width: 198px;
      background: #DCE8FF;
      border-radius: 10px;
      color: var(--blue-color);
    }
    .sub-category {
      margin-left: 20px;
    }
    .iframe-styles {
      padding: 20px;
      width: 100%;
      height: calc(100vh - 80px);
      box-sizing: border-box;
      background-color: var(--bg-color);
      border: none;
    }
  </style>
</head>
<body class="admin-page">
<!-- 头部 -->
<div class="header-box">
  <!-- logo -->
  <div class="logo-box">
    <img src="./pic/logo.png" alt srcset>
  </div>
  <!-- 用户信息 -->
  <div class="user-box">
    <div class="gray" onclick="logout()">
      <img src="./pic/logout.svg" alt="" srcset="">
      <span>退出</span>
    </div>
  </div>
</div>
<div class="cont-box">
  <!-- 侧边栏 -->
  <div class="sidebar">
    <ul class="nav flex-column">
      <li class="nav-item">
        <div class="nav-link active huodong">
          <img src="./pic/huodong.png" class="white-img"  alt="">
          <img src="./pic/huodong-0.png" class="gray-img"  alt="">
          <span>活动管理</span>
        </div>
        <ul class="nav flex-column sub-category">
          <li><a class="nav-link" id="activitiesList" data-desc="huodong" href="activities-list.html">活动列表</a></li>
          <li><a class="nav-link" id="createActivity" data-desc="huodong" href="create-activity.html">新建抽奖活动</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <div class="nav-link jiangpin">
          <img src="./pic/jiangpin.png" class="white-img" style="display: none;" alt="">
          <img src="./pic/jiangpin-0.png" class="gray-img"  alt="">
          <span>奖品管理</span>
        </div>
        <ul class="nav flex-column sub-category">
          <li><a class="nav-link" data-desc="jiangpin" href="prizes-list.html">奖品列表</a></li>
          <li><a class="nav-link" data-desc="jiangpin" href="create-prizes.html">创建奖品</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <div class="nav-link renyuan">
          <img src="./pic/renyuan.png" class="white-img" style="display: none;" alt="">
          <img src="./pic/renyuan-0.png" class="gray-img"  alt="">
          <span>人员管理</span>
        </div>
        <ul class="nav flex-column sub-category">
          <li><a class="nav-link" id="userList" data-desc="renyuan" href="user-list.html">人员列表</a></li>
          <li><a class="nav-link" id="register" data-desc="renyuancreate" href="register.html">注册用户</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- 内容区域 -->
  <div class="main-content">
    <!-- 内容将根据点击的导航项动态加载 -->
    <iframe id="contentFrame" src="activities-list.html" class="iframe-styles"></iframe>
  </div>
</div>

<!-- 引入jQuery和Bootstrap的JavaScript -->
<script
        src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  // 活动新建完成后, 自动跳转到活动列表页
  // 创建普通员工后, 自动跳转到人员列表页
  // 监听子message事件,实现子页面向父页面传递
  window.addEventListener('message', function(e){
    console.log('子页面传递的数据', e.data)
    if(e.data && e.data.from){
      // from : activities-list.html
      // id : activitiesList
      var pages = e.data.from+'?param=' +  new Date().getTime()
      $('#contentFrame').attr('src', pages);
      let id = e.data.id
      // 移除所有链接的激活样式
      $('ul.nav .nav-link').removeClass('active');
      // 为当前子页面发送的链接添加激活样式
      $(id).addClass('active');
      $(id).parent().parent('.sub-category').prev().addClass('active');
    }
  }, false);

  // 导航点击事件处理
  $('ul.nav a').on('click', function(event) {
    // 阻止链接默认的导航行为，这样页面不会跳转到href属性指定的URL。
    event.preventDefault();
    // 移除所有链接的激活样式
    $('ul.nav .nav-link').removeClass('active');
    // 为当前点击的链接添加激活样式
    $(this).addClass('active');
    // 选中二级菜单时默认选中对应的一级菜单
    $(this).parent().parent('.sub-category').prev().addClass('active');

    // 生成一个随机参数（时间戳） 解决iframe缓存问题
    var randomParam = new Date().getTime();
    // 获取当前点击的链接的data-desc属性值
    var dataDesc = $(this).data('desc');
    var page = '';
    if (dataDesc === "renyuancreate") {
      page = $(this).attr('href') + "?param=" + randomParam + "&jumpList=true&admin=false";
    } else {
      page = $(this).attr('href') + "?param=" + randomParam;
    }
    $('#contentFrame').attr('src', page);
  });

  // 确保默认情况下第一个链接是激活状态
  $(document).ready(function() {
    // 选取页面中第一个<ul>元素下，具有class="nav"的<a>元素
    // ul.nav 是侧边栏导航的类名
    // active类 定义了导航项被激活或选中的状态
    $('ul.nav a:first').addClass('active');
  });

  // 退出登录
  function logout(){
    localStorage.removeItem("user_token")
    location.href='/blogin.html'
  }
</script>
</body>
</html>